<template>
  <a-layout>
    <a-layout-content style="background-color: #F2F2E6">
      <br><br><br>
      <div>
        <!--    步骤条    -->
        <guide-stepper v-if="isShow"/>

        <v-row>
          <v-col cols="12" lg="1">
            <guide-record/>
          </v-col>
          <v-col cols="12" lg="10" style="text-align: center">
            <img src="../../public/images/search.png"
                 alt=""
                 style="width: 220px; height: 200px; margin-top: 90px"/>
          </v-col>
          <v-col cols="12" lg="1"></v-col>
        </v-row>

        <p align="center"
           style="font-family: '华文楷体',sans-serif; margin-top: 50px; margin-bottom: 35px; font-size: 35px; color: #89B8CA; font-weight: bolder">
          根据您选择的解决途径和问题现状，使用专属工具，获得更有针对性的发明原理吧。<br>
          我们将会根据发明原理为您智能推荐一系列“问题因子”（关键词）供您检索。
        </p>

      </div>
      <TrizMatrix ref="triz" v-on:results="receiveResults"></TrizMatrix>

      <v-card
        elevation="4"
        shaped
        tile
        style="padding: 8px 8px 10px 10px; margin: 20px; "
        color="au_white"
      >

        <v-card-title style="font-family: '华文楷体',sans-serif;font-size: large; font-weight: bold; color: #89B8CA">
          <v-spacer></v-spacer>
          <span>点击您选择的解决途径，使用矛盾矩阵，确定发明原理&nbsp;</span>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                color="primary"
                dark
                v-bind="attrs"
                v-on="on"
              >
                mdi-help-circle-outline
              </v-icon>
            </template>
            <span>
              点击解决途径卡片，您将得到一个阿奇舒勒矛盾矩阵工具;<br>
              根据解决途径的内容，选择一个想要改善的参数和一个对应恶化的参数;<br>
              点击提交后，解决途径卡片中将会出现对应的发明原理。
            </span>
          </v-tooltip>
          <v-spacer></v-spacer>
          <v-btn style="font-weight: bold; font-size: 16px;" rounded @click="load">
            刷新
            <v-icon style="font-size: 15px;">mdi-refresh</v-icon>
          </v-btn>
        </v-card-title>

        <v-divider></v-divider>
        <div
          style="border-radius: 4px; overflow: auto; width: 100%; height: 600px;"
          :infinite-scroll-disabled="false"
          :infinite-scroll-distance="10"
        >
          <a-list :data-source="selectedDirections"
                  :grid="{ gutter: 16, column: 3 }"
                  style="width: 99%"
          >
            <a-list-item slot="renderItem" slot-scope="item, index" style="margin-top: 20px">
              <v-card
                hover
                rounded="xl"
                @click="openTrizDialog(index)"
                style="margin: 0 10px; padding: 10px; height: 69vh "
                :style="{backgroundColor: item.type}"
                :ripple="false"
              >
                <v-card-title style="font-family: '华文楷体',sans-serif;
                             font-size: 17px;
                             padding: 0 0 0 8px;
                             margin-bottom: 8px;
                             margin-top: 2px;
                             color: #6b5152;
                             margin-left: 10px;
                             font-weight: bolder">
                  对于功能/部件{{ item.id }}的解决途径
                </v-card-title>
                <v-card-text>
                  <v-list flat :style="{backgroundColor: item.type}">
                    <v-list-item-group
                      color="#965454"
                      style="overflow-y: auto; overflow-x: hidden; height: 40vh"
                    >
                      <v-container
                        style="color: #2C2E2D; background-color: transparent; height: auto"
                        v-if="item.clashMessage !== ''">
                        <v-icon style="color: #965454">mdi-car-brake-low-pressure</v-icon>
                        <span class="ZZGF-font-bold" style="margin-left: 10px; color: #965454">{{ item.clashMessage }} </span>
                      </v-container>

                      <v-subheader class="ZZGF-font">
                        找到一种方法，满足以下条件：
                      </v-subheader>
                      <v-list-item
                        style="height: auto; color: #2C2E2D"
                        disabled
                        v-for="(suggest, i) in item.suggestion"
                        :key="i">
                        <v-icon style="margin-left: 20px">mdi-lightbulb-multiple-outline</v-icon>
                        <span class="ZZGF-font-bold" style="margin-left: 5px">{{suggest}}</span>
                      </v-list-item>

                    </v-list-item-group>
                  </v-list>
                  <v-card class="under-card">
                    <v-card-text
                      style="height: 20px; color: #89B8CA;">
                      <v-icon style="color: #89B8CA">mdi-check-decagram-outline</v-icon>
                      <span class="ZZGF-font-bold" style="margin-left: 10px">
                      发明原理
                    </span>
                      <br>
                    </v-card-text>
                    <v-card-text>
                      <a-tag
                        v-for="(p, i) in item.principle"
                        :key="i"
                        style="font-family: '华文楷体',sans-serif; font-size: 13px; margin-bottom: 10px; font-weight: bolder"
                      >{{p}}</a-tag>
                    </v-card-text>

                  </v-card>
                </v-card-text>
              </v-card>
            </a-list-item>

          </a-list>
        </div>

      </v-card>
      <div style="text-align: center; margin-top: 50px; margin-bottom: 50px" ref="recommend">
        <v-btn
          elevation="12"
          rounded
          large
          color="main_1"
          :disabled="principles.length === 0"
          @click="recommend"
          style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4; "
        >
          <span>“问题因子”推荐</span>
          &nbsp;
          <v-icon>mdi-key-outline</v-icon>
        </v-btn>
      </div>
      <v-card
        v-if="searchVisable"
        elevation="4"
        shaped
        tile
        style="margin: 20px; padding-top: 2px; padding-bottom: 30px"
        color="au_white"
      >

        <v-card
          elevation="1"
          style="padding: 8px 8px 10px 10px ; margin: 10px"
          color="#ececea"
        >
          <div
            style="border-radius: 4px; overflow: auto; width: 100%; height: 180px;"
            :infinite-scroll-disabled="false"
            :infinite-scroll-distance="10"
          >
            <a-list :grid="{ gutter: 16, column: 3 }"
                    style="width: 99%; "
                    header="我们为您智能推荐了一系列“问题因子”用于专利检索，您也可以自行添加关键词进行补充。">
              <a-checkable-tag
                @change="handleChange(i)"
                v-for="(p, i) in keywords"
                :key="i"
                v-model="checkArray[i]"
                style="font-family: '华文楷体',sans-serif; font-size: 15px; margin-bottom: 10px; font-weight: bolder"
              >{{p}}</a-checkable-tag>
            </a-list>

          </div>
        </v-card>
        <div style="width: 900px; margin: 80px auto auto;">

          <div>
            <template v-for="(tag, index) in tags">
              <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                <a-tag :key="tag"
                       :closable="true"
                       @close="() => handleClose(tag)"
                       style="font-family: '华文楷体',sans-serif; font-size: 15px; margin-bottom: 10px; font-weight: bolder">
                  {{ `${tag.slice(0, 20)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag v-else :key="tag"
                     :closable="true"
                     @close="() => handleClose(tag)"
                     style="font-family: '华文楷体',sans-serif; font-size: 15px; margin-bottom: 10px; font-weight: bolder">
                {{ tag }}
              </a-tag>
            </template>
            <a-input
              v-if="inputVisible"
              ref="input"
              type="text"
              @keydown.native="keydown($event)"
              size="small"
              style="font-family: '华文楷体',sans-serif"
              :style="{ width: '78px' }"
              :value="inputValue"
              @change="handleInputChange"
              @blur="handleInputConfirm"
              @keyup.enter="handleInputConfirm"
            />
            <a-tag v-else
                   style="background: #fff; borderStyle: dashed; font-family: '华文楷体',sans-serif; font-size: 15px; margin-bottom: 10px; font-weight: bolder"
                   @click="showInput">
              <a-icon type="plus" /> 自定义关键词
            </a-tag>
          </div>
          <v-divider color="au_black"></v-divider>
        </div>
        <div style="text-align: center; margin-top: 30px; margin-bottom: 30px">
          <v-btn
            elevation="12"
            rounded
            large
            :loading="searchLoading"
            color="main_1"
            :disabled="tags.length === 0"
            @click="searchPatent_click"
            style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4; "
          >
            <span>专利检索</span>
            &nbsp;
            <v-icon>mdi-map-search</v-icon>
          </v-btn>
        </div>

        <a-spin tip="Loading..." :spinning="searchLoading">
          <div ref="patent_list">
            <v-card style="margin: 10px 20px; padding: 10px; font-family: '华文楷体',sans-serif;"
                    rounded="lg"
                    v-if="patents.length !== 0"
                    v-for="(item, i) in patents"
                    :key="i"
                    :hover="true"
                    @click="showDetails(item)">
              <el-descriptions
                border
                size="medium"
              >
                <el-descriptions-item
                  label="专利名称"
                  content-style="text-align: center; width: 450px; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; width: 150px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  <div v-html="item.name"></div>
                </el-descriptions-item>
                <el-descriptions-item
                  label="专利类型"
                  content-style="text-align: center; width: 200px; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; width: 100px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  {{item.type}}
                </el-descriptions-item>
                <el-descriptions-item
                  label="公开号"
                  content-style="text-align: center; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  {{item.gkh}}
                </el-descriptions-item>
                <el-descriptions-item
                  label="主分类号"
                  content-style="text-align: center; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  {{item.zflh}}
                </el-descriptions-item>
                <el-descriptions-item
                  label="领域"
                  content-style="text-align: center; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  {{item.field}}
                </el-descriptions-item>
                <el-descriptions-item
                  label="申请日期"
                  content-style="text-align: center; font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  {{item.sqrq}}
                </el-descriptions-item>
                <el-descriptions-item
                  label="摘要"
                  content-style="font-weight: bold; color: #2C2E2D"
                  label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
                  <div v-html="item.content"></div>
                </el-descriptions-item>
              </el-descriptions>
            </v-card>
          </div>
        </a-spin>
        <div style="margin-top: 40px; margin-bottom: 20px; text-align: center">
          <a-pagination
            v-if="patents.length !== 0"
            @change="handleCurrentChange"
            :current="currentPage"
            :page-size="pageSize"
            :total="total">
          </a-pagination>
        </div>

      </v-card>
      <div style="text-align: center; margin-top: 30px; margin-bottom: 30px">
        <v-btn
          elevation="12"
          rounded
          large
          :loading="searchLoading"
          color="main_1"
          v-if="patents.length !== 0"
          @click="gogogo"
          style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4; "
        >
          <span>完成创新引导，编辑解决方案</span>
          &nbsp;
          <v-icon>mdi-circle-edit-outline</v-icon>
        </v-btn>
      </div>

      <v-dialog
        v-model="dialog"
        fullscreen
        style="padding: 30px"
        transition="dialog-bottom-transition"
      >
        <v-toolbar
          dark
          color="primary"
        >
          &emsp;&emsp;
          <v-toolbar-title style="font-family: '华文楷体',sans-serif; font-weight: bold"><div v-html="dialogValue.name"></div></v-toolbar-title>
          <v-spacer></v-spacer>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                color="#8696a7"
                v-bind="attrs"
                v-on="on"
                style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 18px"
                @click="extract"
                :loading="noteLoading"
              >
                摘录
              </v-btn>
            </template>
            <span style="font-family: '华文楷体',sans-serif; font-weight: bold">摘录该专利的关键信息到笔记中</span>
          </v-tooltip>
          &emsp;
          <v-btn
            icon
            dark
            @click="dialog = false"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn>



        </v-toolbar>
        <v-spacer></v-spacer>
        <v-card style="min-height: 95vh">
          <el-descriptions :column="1" border style="font-family: '华文楷体',sans-serif; font-weight: bold">
            <el-descriptions-item
              label="专利名称"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D; width: 10vw;">
              <div v-html="dialogValue.name"></div>
            </el-descriptions-item>
            <el-descriptions-item
              label="专利摘要"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              <div v-html="dialogValue.content"></div>
            </el-descriptions-item>
            <el-descriptions-item
              label="专利类型"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.type}}
            </el-descriptions-item>
            <el-descriptions-item
              label="申请日期"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.sqrq}}
            </el-descriptions-item>
            <el-descriptions-item
              label="公开/公告日"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.gkr}}
            </el-descriptions-item>
            <el-descriptions-item
              label="公开/公告号"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.gkh}}
            </el-descriptions-item>
            <el-descriptions-item
              label="主分类号"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.zflh}}
          </el-descriptions-item>
            <el-descriptions-item
              label="发明/设计人"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.fmr}}
          </el-descriptions-item>
            <el-descriptions-item
              label="专利代理机构"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.zldljg}}
            </el-descriptions-item>
            <el-descriptions-item
              label="代理人"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.dlr}}
            </el-descriptions-item>
            <el-descriptions-item
              label="国别省市代码"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.ssdm}}
            </el-descriptions-item>
            <el-descriptions-item
              label="法律状态"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.flzt}}
            </el-descriptions-item>
            <el-descriptions-item
              label="链接"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              <a :href="dialogValue.url" target="_blank">{{dialogValue.url}}</a>
            </el-descriptions-item>
            <el-descriptions-item
              label="领域"
              content-style="font-weight: bold; color: #2C2E2D"
              label-style="text-align: center; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
              {{dialogValue.field}}
            </el-descriptions-item>
          </el-descriptions>
        </v-card>
      </v-dialog>
      <div>
        <a-back-top />
      </div>

    </a-layout-content>
  </a-layout>


</template>

<script>
  import request from "../utils/request";
  import GuideStepper from '../components/Stepper'
  import GuideRecord from '../components/GuideRecord'
  import TrizMatrix from '../components/Triz'
  export default {
    name: 'guidance_retrieval',
    components: {
      GuideStepper, GuideRecord, TrizMatrix
    },
    data() {
      return {
        noteLoading: false,
        dialog: false,
        spin: false,
        isShow: true,
        tags: [], //搜索tag列表
        search_tags: [],
        dialogValue: {},
        currentPage: 1,
        pageSize: 10,
        total: 0,
        showCard: false,
        searchLoading: false,
        inputVisible: false,
        inputValue: '',
        searchVisable: false,
        trizDialog: false,
        selectedDirections: [],
        principle_index: [],
        principles: [],
        keywords: [], //关联词列表
        checkArray: [], //关键词选中列表 选中为true
        search_checkArray: [],
        patents: [],
        note: {},
        guide: {}
      }
    },
    computed: {
    },
    created() {
      this.$store.state.currentStep = 3
      this.load()
      this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
    },
    activated() {
      this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
      this.$store.state.currentStep = 3
      // this.load()
    },
    mounted() {
    },
    beforeRouterEnter(to, from, next) {
      next((vm) => {
        vm.isShow = true;
      });
    },
    beforeRouterLeave(to, from, next) {
      this.isShow = false;
      next();
    },
    methods: {
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.confirm()
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.confirm()
        }
      },
      confirm(){
        if (sessionStorage.getItem('guideId'))
          sessionStorage.removeItem('guideId')
        if (sessionStorage.getItem('graph'))
          sessionStorage.removeItem('graph')
        if (sessionStorage.getItem('selectableNodes'))
          sessionStorage.removeItem('selectableNodes')
        this.$router.push('/personal/guide')
      },
      gogogo(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code !== '200'){
            this.confirm()
          }
          else {
            this.$store.state.currentStep = 4
            this.guide.userId = -1
            this.guide.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            if (this.$store.state.maxStep < 4)
              this.guide.process = 4
            request.post("/guide", this.guide).then(res => {
              if (res.code === '200') {
                this.sendSuccessMessage(res.msg)
              }
            })
            this.$router.push('/intelligent_guidance/solution_edit')
          }
        })
      },
      async extract(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code !== '200') {
            this.confirm()
          }
          else {
            this.noteLoading = true
            request.get('/patent/' + this.dialogValue.gkh).then(result => {
              if (result.code === '200'){
                this.note.name = result.data.name
                this.note.patentId = this.dialogValue.gkh
                this.note.guideId = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
                this.note.userId = -1
                this.note.content = '<p>' + "专利名称：" + result.data.name + '<br/><br/>' + "专利摘要：" + result.data.content + '<br/><br/></p>'
                request.post('/note/insert', this.note).then(res => {
                  if (res.code === '200') {
                    this.noteLoading = false
                    this.sendSuccessMessage('笔记摘录成功')
                  } else {
                    this.noteLoading = false
                    this.sendWarnMessage(res.msg)
                  }
                })
              }
            })
          }
        })
      },
      handleCurrentChange(pageNum) {  // 改变当前页码触发
        this.currentPage = pageNum
        this.searchPatent_change()
      },
      async searchPatent_click(){
        this.currentPage = 1
        this.searchLoading = true
        await request.get("/patent/searchByKeyWords", {
          params: {
            PageNum: 1,
            PageSize: this.pageSize,
            words: this.tags.join('')
          }
        }).then(res => {
          if (res.code === '200') {
            this.search_tags = JSON.parse(JSON.stringify(this.tags))
            this.search_checkArray = JSON.parse(JSON.stringify(this.checkArray))
            this.searchLoading = false
            this.patents = res.data.list
            this.total = res.data.total
          }
          else if(res.code === '600'){
            this.searchLoading = false
            this.patents = []
            this.total = 0
            this.sendWarnMessage('暂无搜索结果')
          }
        })
        this.$vuetify.goTo(this.$refs.patent_list, {
          duration: 500,
          offset: 70,
          easing: 'easeInOutCubic',
        })
      },
      async searchPatent_change(){
        this.searchLoading = true
        await request.get("/patent/searchByKeyWords", {
          params: {
            PageNum: this.currentPage,
            PageSize: this.pageSize,
            words: this.search_tags.join('')
          }
        }).then(res => {
          if (res.code === '200') {
            this.searchLoading = false
            this.patents = res.data.list
            this.total = res.data.total
            this.tags = JSON.parse(JSON.stringify(this.search_tags))
            this.checkArray = JSON.parse(JSON.stringify(this.search_checkArray))
          }
        })
        this.$vuetify.goTo(this.$refs.patent_list, {
          duration: 500,
          offset: 70,
          easing: 'easeInOutCubic',
        })
      },
      openTrizDialog(index){
        this.$refs.triz.showDialog(index)
      },
      showDetails(patent){
        this.dialog = true
        this.dialogValue = patent
      },
      async recommend(){
        let newArr = []
        for (let i = 0, l = this.principles.length; i < l; i++) {
          if (newArr.indexOf(this.principles[i]) === -1) {
            newArr.push(this.principles[i])
          }
        }
        await request.post("/guide/recommendKeyWord", newArr).then(res => {
          if (res.code === '200') {
            this.keywords = res.data
            this.checkArray = new Array(this.keywords.length).fill(false)
            this.search_checkArray = new Array(this.keywords.length).fill(false)
            this.tags = []
            this.search_tags = []
            this.patents = []
          }
        })
        this.$vuetify.goTo(this.$refs.recommend, {
          duration: 500,
          offset: -50,
          easing: 'easeInOutCubic',
        })
        this.searchVisable = true
      },
      receiveResults(index_array, results, index){
        this.principles = []
        this.$set(this.selectedDirections[index], "principle", results)
        this.principle_index[index] = index_array
        for (let i = 0; i < this.principle_index.length; i++){
          for (let j = 0; j < this.principle_index[i].length; j++){
            this.principles.push(this.principle_index[i][j])
          }
        }
      },
      load(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code !== '200') {this.confirm()}
          else{
            let id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            request.get("/guide/" + id).then(res => {
              this.selectedDirections = JSON.parse(res.data.direction)
              this.principle_index = new Array(this.selectedDirections.length).fill([])
            })
          }})
      },

      handleChange(index){
        if (this.tags.length === 10 && this.tags.indexOf(this.keywords[index]) === -1){
          this.sendWarnMessage('最多使用10个关键词进行搜索')
          this.checkArray[index] = false
        }
        else {
          if (this.tags.indexOf(this.keywords[index]) === -1){
            this.tags.push(this.keywords[index])
          }
          else{
            this.checkArray[index] = false
            this.tags.splice(this.tags.indexOf(this.keywords[index]), 1)
          }
        }
      },
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag);
        if (this.keywords.indexOf(removedTag) !== -1)
          this.checkArray[this.keywords.indexOf(removedTag)] = false
        this.tags = tags;
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        if (this.tags.length === 10){
          this.sendWarnMessage('最多使用10个关键词进行搜索')
          return
        }
        if (this.keywords.indexOf(e.target.value) !== -1)
          this.checkArray[this.keywords.indexOf(e.target.value)] = true
        this.inputValue = e.target.value;
      },

      handleInputConfirm() {
        const inputValue = this.inputValue;
        let tags = this.tags;
        if (inputValue && tags.indexOf(inputValue) === -1 && inputValue.split(" ").join("").length !== 0) {
          tags = [...tags, inputValue];
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: '',
        });
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .ant-list-header{
    font-family: '华文楷体',sans-serif;
    font-weight: bolder;
    font-size: 18px;
    color: #89B8CA;
    text-align: center;
  }
  .under-card{
    height: 16vh;
    width: 26vw;
    background-color: #FFFAF4 !important;
    position :absolute;
    top: 72%
  }
  .v-application--is-ltr .v-banner__wrapper{
    padding: 0;
  }
  .ant-descriptions-item-label{
    font-weight: bold !important;
    width: 10vw !important;
    background-color: #FFFAF4 !important;
  }
  .v-dialog{
    box-shadow: none !important;
  }
</style>
